<!-- 红包商城订单信息 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="订单列表" name="one">
        <div class="container">
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <el-icon>
                  <Search />
                </el-icon> 查询条件：
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row :gutter="10">
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-input v-model="searchCondition.order_no" clearable placeholder="请输入订单编号"></el-input>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-input v-model="searchCondition.goods_name" clearable placeholder="请输入商品名称"></el-input>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-input v-model="searchCondition.user_name" clearable placeholder="请输入收货人姓名"></el-input>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-input v-model="searchCondition.mobile" clearable placeholder="请输入收货人手机号"></el-input>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-select v-model.trim="searchCondition.status" placeholder="请选择状态" clearable>
                <el-option v-for="item in state.selectStatusList" :label="item.dictLabel" :value="item.dictValue"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-select v-model.trim="searchCondition.is_print" clearable placeholder="是否打印">
                <el-option v-for="item in state.selectWhetherList" :label="item.dictLabel" :value="item.dictValue"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-select v-model.trim="searchCondition.delivery_type" placeholder="请选择配送方式" clearable>
                <el-option v-for="item in state.selectDeliveryTypeList" :label="item.dictLabel" :value="item.dictValue"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-input v-model="searchCondition.express_no" clearable placeholder="请输入快递单号"></el-input>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom:10px">
              <el-date-picker v-model="state.queryDate" type="datetimerange" range-separator="至"
                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
                @change="changeQueryDate" end-placeholder="结束时间">
              </el-date-picker>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom:10px">
              <el-date-picker v-model="state.payTime" type="datetimerange" range-separator="至"
                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="支付时间"
                @change="changePayTime" end-placeholder="结束时间">
              </el-date-picker>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom:10px">
              <el-date-picker v-model="state.deliveryTime" type="datetimerange" range-separator="至"
                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="发货时间"
                @change="changeDeliveryTime" end-placeholder="结束时间">
              </el-date-picker>
            </el-col>

            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
              <el-button type="warning" :icon="Refresh" :disabled="disabledbtn"
                @click="resetSearch(customMethods)">重置</el-button>
            </el-col>
          </el-row>
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item> 查询结果：</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="handle-box">
            <el-button type="primary" :icon="Edit" class="mr10" :disabled="disabledbtn" @click="handleBatchPrint">批量打印订单
            </el-button>
            <el-button type="success" :icon="Edit" class="mr10" :disabled="disabledbtn"
              @click="handleBatchPrintExpressSingle">批量打印快递单
            </el-button>
            <el-button type="success" :icon="Edit" plain class="mr10" :disabled="disabledbtn"
              @click="handleMergePrintExpressSingle">合并打印快递单
            </el-button>
          </div>
          <el-table :data="tableState.tableList" border class="table" ref="multipleTableRef" v-loading="tableLoading"
            :reserve-selection="true" @row-dblclick="rowDblclick">
            <!--  高亮显示 :row-class-name="handleTableRowClassName" -->
            <el-table-column type="index" align="center"> </el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="order_no" label="订单号" align="center">
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="pay_price" label="实付金额/元" align="center">
            </el-table-column>
            <el-table-column prop="statusName" label="订单状态" align="center">
            </el-table-column>

            <el-table-column prop="deliveryName" label="配送方式" align="center">
            </el-table-column>
            <el-table-column prop="express_no" label="快递单号" align="center">
            </el-table-column>
            <el-table-column prop="user_name" label="收货信息" align="center">
              <template #default="scope">
                <div class="ibDraggable">
                  <div>{{ scope.row.user_name }}</div>
                  <div>{{ scope.row.mobile }}</div>
                  <div>{{ scope.row.full_address }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">
            </el-table-column>
            <el-table-column prop="pay_time" label="支付时间" align="center">
              <template #default="scope">
                {{ [null, ''].includes(scope.row.pay_time) ? '--' : scope.row.pay_time }}
              </template>
            </el-table-column>
            <el-table-column prop="delivery_time" label="发货时间" align="center">
              <template #default="scope">
                {{ [null, ''].includes(scope.row.delivery_time) ? '--' : scope.row.delivery_time }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" text :icon="View" @click="handleViewEdit(scope.row, 'view')">
                  查看
                </el-button>
                <el-button type="primary" size="small" text :icon="Edit" v-if="scope.row.status === 'pendingPayment'"
                  @click="handleViewEdit(scope.row, 'edit')">
                  编辑
                </el-button>
                <el-button type="primary" size="small" text :icon="Printer" class="cyan" v-permission="'getOrderPrint'"
                  v-if="scope.row.is_print === 0 && ['toBeDelivered', 'toBeReceived', 'completed'].includes(scope.row.status)"
                  @click="handlePrintOrder(scope.row)">
                  打印订单
                </el-button>
                <el-button type="primary" size="small" text :icon="Printer" class="gray" v-permission="'getOrderPrint'"
                  v-if="scope.row.is_print === 1 && ['toBeDelivered', 'toBeReceived', 'completed'].includes(scope.row.status)"
                  @click="handlePrintOrder(scope.row)">
                  已打印
                </el-button>
                <el-button type="primary" size="small" text :icon="Van" class="cyan" v-permission="'orderDelivery'"
                  v-if="scope.row.status === 'toBeDelivered' && scope.row.delivery_type === 'expressDelivery'"
                  @click="handleGoodsShip(scope.row.id, scope.row.express_id, scope.row.express_no)">
                  发货
                </el-button>
                <el-button type="primary" size="small" text :icon="Edit" class="cyan" v-permission="'orderDelivery'"
                  v-if="scope.row.status === 'toBeReceived' && scope.row.delivery_type === 'expressDelivery'"
                  @click="handleGoodsShip(scope.row.id, scope.row.express_id, scope.row.express_no)">
                  发货修改单号
                </el-button>
                <div class="mlr10 display-inline-block"
                  v-if="['toBeDelivered'].includes(scope.row.status) && scope.row.express_no === ''">
                  <el-popconfirm placement="top" width="160" title="你确定要打印快递单吗?"
                    @confirm="handlePrintExpress(scope.row)">
                    <template #reference>
                      <el-button text :icon="Edit" size="small" class="cyan">打印快递单
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div class="mlr10 display-inline-block"
                  v-if="['toBeReceived'].includes(scope.row.status) || (['toBeDelivered'].includes(scope.row.status)) && scope.row.express_no !== ''">
                  <el-popconfirm placement="top" width="160" title="你确定要重新打印快递单吗?"
                    @confirm="handleReprintPrintExpress(scope.row)">
                    <template #reference>
                      <el-button text :icon="Edit" size="small" class="cyan">重新打印快递单
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div class="mlr10 display-inline-block" v-permission="'cancelOrder'"
                  v-if="scope.row.status === 'pendingPayment'">
                  <el-popconfirm placement="top" width="160" title="你确定要取消订单吗?" @confirm="handleCancelOrder(scope.row)">
                    <template #reference>
                      <el-button text :icon="Close" size="small" class="red">取消订单
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div class="mlr10 display-inline-block" v-permission="'confirmOrder'" v-if="['storePickup', 'salesmanDistribution'].includes(scope.row.delivery_type) &&
  ['toBeDelivered'].includes(scope.row.status)">
                  <el-popconfirm placement="top" width="160" title="你确定要收货吗?" @confirm="handleReceiptOrder(scope.row)">
                    <template #reference>
                      <el-button text :icon="CircleCheck" size="small" class="orange">确认收货
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div class="mlr10 display-inline-block" v-permission="'applyRefundOrder'"
                  v-if="['toBeDelivered', 'toBeReceived', 'completed'].includes(scope.row.status)">
                  <el-popconfirm placement="top" width="160" title="你确定要申请退款吗?" @confirm="handleApplyRefund(scope.row)">
                    <template #reference>
                      <el-button text :icon="Edit" size="small" class="cyan">申请退款
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div class="mlr10 display-inline-block" v-permission="'agreeRefundOrder'"
                  v-if="scope.row.status === 'refunding'">
                  <el-popconfirm placement="top" width="160" title="你确定要同意退款吗?"
                    @confirm="handleAgreeToRefund(scope.row)">
                    <template #reference>
                      <el-button text :icon="CircleCheck" size="small" class="cyan">同意
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <el-button type="primary" size="small" text :icon="ChatDotSquare" v-permission="'ordeRemark'"
                  class="orange" @click="handleOrderRemark(scope.row, 'edit')">
                  商家备注
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background @update:current-page="handleCurrentChange" @update:page-size="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper" :page-size="searchCondition.size"
              :current-page="searchCondition.current" :page-sizes="pageSizes" :total="total"
              :hide-on-single-page="false">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单详情" name="two">
        <!-- <span slot="label"><i class="el-icon-tickets"></i> 订单详情</span> -->
        <div class="container" ref="formRef" v-loading="formLoading">
          <el-divider content-position="left"><span class="title-left-color">收货信息</span></el-divider>

          <div style="margin:0 70px">
            <el-descriptions :column="2" size="default" border>
              <el-descriptions-item label="收货人姓名：" label-align="right">{{ redMallOrderInfo.user_name
}}</el-descriptions-item>
              <el-descriptions-item label="手机号：" label-align="right">{{ redMallOrderInfo.mobile
}}</el-descriptions-item>
              <el-descriptions-item label="联系地址：" label-align="right">{{ redMallOrderInfo.address
}}</el-descriptions-item>
              <el-descriptions-item label="配送方式：" label-align="right">{{ redMallOrderInfo.deliveryName
}}</el-descriptions-item>
              <el-descriptions-item label="物流公司：" label-align="right"
                v-if="mallGoodsForm.delivery_type === 'expressDelivery'">{{
    redMallOrderInfo.express_name
}}</el-descriptions-item>
              <el-descriptions-item label="物流单号：" label-align="right"
                v-if="mallGoodsForm.delivery_type === 'expressDelivery'">
                {{ redMallOrderInfo.express_no }}
                <el-button type="primary" plain size="small" class="ml10"
                  v-if="['toBeReceived', 'toBeDelivered'].includes(redMallOrderInfo.status)"
                  @click="handleGoodsShip(mallGoodsForm.id, redMallOrderInfo.express_id, redMallOrderInfo.express_no)">修改单号</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="业务员姓名：" label-align="right"
                v-if="mallGoodsForm.delivery_type === 'salesmanDistribution'">{{
    staff_info.staff_name
}}</el-descriptions-item>
              <el-descriptions-item label="业务员联系方式：" label-align="right"
                v-if="mallGoodsForm.delivery_type === 'salesmanDistribution'">{{
    staff_info.staff_mobile
}}</el-descriptions-item>
              <el-descriptions-item label="用户备注：" label-align="right">{{ redMallOrderInfo.buyer_remark
}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="margin:0 70px" v-if="mallGoodsForm.delivery_type === 'expressDelivery'">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="收货信息：" label-align="right">{{ redMallOrderInfo.user_name }} {{
    redMallOrderInfo.mobile
}}
                {{ redMallOrderInfo.address }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <el-divider content-position="left"><span class="title-left-color">订单信息</span></el-divider>
          <div style="margin:0 70px">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="订单编号：" label-align="right">{{ redMallOrderInfo.order_no
}}</el-descriptions-item>
              <el-descriptions-item label="订单状态：" label-align="right">{{ redMallOrderInfo.statusName
}}</el-descriptions-item>

              <el-descriptions-item label="创建时间：" label-align="right">{{ redMallOrderInfo.create_time
}}</el-descriptions-item>
              <el-descriptions-item label="支付时间：" label-align="right">{{ redMallOrderInfo.pay_time
}}</el-descriptions-item>
              <el-descriptions-item label="发货时间：" label-align="right">{{ redMallOrderInfo.delivery_time
}}</el-descriptions-item>
              <el-descriptions-item label="收货时间：" label-align="right">{{ redMallOrderInfo.receipt_time
}}</el-descriptions-item>
              <el-descriptions-item label="申请退款时间：" label-align="right">{{ redMallOrderInfo.apply_refund_time
}}</el-descriptions-item>
              <el-descriptions-item label="退款时间：" label-align="right">{{ redMallOrderInfo.refund_time
}}</el-descriptions-item>
              <el-descriptions-item label="退款驳回时间：" label-align="right">{{ redMallOrderInfo.reject_time
}}</el-descriptions-item>
              <el-descriptions-item label="取消时间：" label-align="right">{{ redMallOrderInfo.cancel_time
}}</el-descriptions-item>
              <el-descriptions-item label="支付方式：" label-align="right">{{ redMallOrderInfo.payName
}}</el-descriptions-item>
              <el-descriptions-item label="商家备注：" label-align="right">{{ redMallOrderInfo.seller_remark
}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <el-divider content-position="left"><span class="title-left-color">商品信息</span></el-divider>
          <el-table :data="state.goodsList" border class="table" show-summary :summary-method="getSummaries"
            :reserve-selection="true">
            <el-table-column type="index" width="55" align="center"> </el-table-column>
            <el-table-column prop="goods_images" label="图片" width="150" align="center">
              <template #default="scope">
                <!-- 闭包formatImgList(scope.row) -->
                <el-image style="width: 60px; height: 60px" :src="imageUrl + scope.row.goods_image"
                  :preview-src-list="formatImgList(scope.row)" preview-teleported>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="sku_name" label="规格" align="center">
              <template #default="scope">
                {{ [null, ''].includes(scope.row.sku_name) ? '--' : scope.row.sku_name }}
              </template>
            </el-table-column>

            <el-table-column prop="goods_price" label="单价：" align="center" sortable>
            </el-table-column>
            <el-table-column prop="num" label="数量：" align="center" sortable>
            </el-table-column>
            <el-table-column prop="total_price" label="总价：" align="center" sortable>
            </el-table-column>
          </el-table>
          <el-divider content-position="left"><span class="title-left-color">费用信息</span></el-divider>
          <div style="margin:0 70px">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="商品总价：" label-align="right">{{ redMallOrderInfo.goods_price
}}元</el-descriptions-item>
              <el-descriptions-item label="红包抵扣：" label-align="right">{{ redMallOrderInfo.red_packet_price
}}元</el-descriptions-item>
              <el-descriptions-item label="运费：" label-align="right">{{ redMallOrderInfo.deliver_price
}}元</el-descriptions-item>
              <el-descriptions-item label="优惠金额：" label-align="right">
                <!-- <el-input v-model.trim="mallGoodsForm.reduce_price"
                          placeholder="优惠金额"
                          @change="handleChangeReducePrice">
                </el-input> -->
                {{ mallGoodsForm.reduce_price }}
                <!-- TODO：等后期做好以后再修改 
                :disabled="disabledbtn"
                -->
                <!-- <div class="ml10">
                  <el-button type="primary"
                             v-if="!isDisabledbtn"
                             disabled
                             @click="submitForm">确 定
                  </el-button>
                </div> -->
              </el-descriptions-item>
              <!-- <el-descriptions-item label="赠送金币">{{redMallOrderInfo.gold_coin_price}}个</el-descriptions-item> -->
              <el-descriptions-item label="实付金额" label-align="right">{{ redMallOrderInfo.pay_price
}}元</el-descriptions-item>
              <!-- <el-descriptions-item label="金币赠送规则">商品总价－红包抵扣－优惠金额</el-descriptions-item> -->
              <el-descriptions-item label="实付金额计算公式" label-align="right">商品总价－红包抵扣－优惠金额＋运费</el-descriptions-item>
            </el-descriptions>
          </div>

          <el-divider content-position="left"><span class="title-left-color">操作记录</span></el-divider>

          <el-table :data="state.orderLogList" border class="table" :reserve-selection="true">
            <el-table-column type="index" align="center"> </el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="type" label="操作平台" align="center">
            </el-table-column>
            <el-table-column prop="user_id" label="用户id" align="center">
            </el-table-column>
            <el-table-column prop="user_name" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="desc" label="描述" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">
            </el-table-column>
          </el-table>
          <div class="footer-center">
            <el-button :disabled="disabledbtn" @click="cancelSubmit">返 回</el-button>
            <el-button type="primary" :disabled="disabledbtn" v-permission="'getOrderPrint'"
              v-if="['toBeDelivered', 'toBeReceived', 'completed'].includes(redMallOrderInfo.status)"
              @click="handleToPrint">去打印
            </el-button>
            <!-- <el-button type="primary"
                       :disabled="disabledbtn"
                       v-if="!isDisabledbtn"
                       @click="submitForm">确 定
            </el-button> -->
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单打印" v-if="checkPermission('getOrderPrint')" name="three">
        <div class="container">
          <div class="main">
            <div id="printMe" class="printMe" v-loading='printLoading'>
              <div style="page-break-after:always;" v-for="item in state.orderInfoList" :key="item.id">
                <el-descriptions :column="3" size="small">
                  <el-descriptions-item label="订单编号">{{ item.order_no }}</el-descriptions-item>
                  <el-descriptions-item label="下单人">{{ item.user_name }}</el-descriptions-item>
                  <el-descriptions-item label="联系号码">{{ item.mobile }}</el-descriptions-item>
                  <el-descriptions-item label="下单时间">{{ item.create_time }}</el-descriptions-item>
                  <el-descriptions-item label="配送方式" contentClassName="font-size--bold">{{ item.deliveryName
}}</el-descriptions-item>
                  <el-descriptions-item label="业务员" v-if="item.delivery_type === 'salesmanDistribution'">{{
    item.staff_info.staff_name
}}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions :column="1" size="small">
                  <el-descriptions-item label="联系地址" v-if="item.delivery_type !== 'storePickup'">{{ item.address
}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="1" size="small">
                  <el-descriptions-item label="买家备注" v-if="item.buyer_remark !== ''">{{ item.buyer_remark
}}</el-descriptions-item>
                  <el-descriptions-item label="商家备注" v-if="item.seller_remark !== ''">{{ item.seller_remark
}}</el-descriptions-item>
                </el-descriptions>
                <!-- <div class="w-title">商品信息</div> -->

                <table ref="printId" id="printId" cellspacing="0" cellpadding="0" border="0">
                  <thead>
                    <tr>
                      <td width="10%">货号</td>
                      <td width="40%">商品名称</td>
                      <td width="20%">规格</td>
                      <td width="10%">单价</td>
                      <td width="10%">数量</td>
                      <td width="10%">金额</td>
                    </tr>
                  </thead>
                  <tbody v-if="item.goods.length">
                    <tr v-for="(_item, index) in item.goods" :key='index'>
                      <td>{{ _item.goods_no }}</td>
                      <td>{{ _item.goods_name }}</td>
                      <td>{{ _item.sku_name }}</td>
                      <td>{{ _item.goods_price }}元</td>
                      <td>{{ _item.num }}件</td>
                      <td>{{ _item.total_price }}元</td>
                    </tr>
                  </tbody>
                </table>
                <div v-if="!item.goods.length" class="table-empty">
                  <span class="table-empty-text">暂无数据</span>
                </div>
                <div></div>
                <div>
                  商品总价:{{ item.goods_price }}元
                </div>
                <div class="print-time">
                  <div>配（__________）验（__________）</div>
                  <div class="time">打印时间：{{ newDate }}</div>
                </div>
                <el-divider></el-divider>
              </div>
            </div>
            <div class="footer-center">
              <el-button :disabled="disabledbtn" @click="cancelSubmit">返 回</el-button>
              <!-- <el-button type="primary"
                         :disabled="disabledbtn"
                         @click="handleToOrderDetail">查看订单
              </el-button> -->
              <el-button type="primary" :disabled="disabledbtn" v-print="printObj" v-permission="'print'"
                @click="handlePrint">打 印</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="填写物流单号" v-model="dialogVisible" width="30%">
      <el-form ref="trackingNumberForm" :model="trackingNumberForm" label-width="150px">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="物流公司：" prop="express_id">
              <el-select v-model.trim="trackingNumberForm.express_id" placeholder="请选择物流公司" clearable class="">
                <el-option v-for="item in state.logisticsList" :label="item.name" :value="item.id"
                  :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="物流单号：" prop="express_no">
              <el-input v-model.trim.number="trackingNumberForm.express_no" placeholder="物流单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :disabled="disabledbtn" @click="putBannerOrderDeliveryInfo">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog title="填写商家备注" v-model="dialogVisible1" width="30%">
      <el-input v-model="sellerRemarkForm.seller_remark" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
        placeholder="商家备注">
      </el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn" @click="putMallOrderRemarkInfo">确
            定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 选择快递公司，批量生成快递单号 -->
    <el-dialog title="请选择物流公司" v-model="expressDialogVisible" width="30%">
      <el-form ref="expressPrintInfo" :model="expressPrintInfo" label-width="150px">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="物流公司：" prop="express_id">
              <el-select v-model.trim="expressPrintInfo.express_id" placeholder="请选择物流公司" clearable class="">
                <el-option v-for="item in state.logisticsList" :label="item.name" :value="item.id"
                  :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="expressDialogVisible = false">取 消</el-button>
          <el-button type="primary" :disabled="disabledbtn" @click="getMallOrderPrintExpressInfo">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import checkPermission from '@/utils/permission.js'; // 权限判断函数
import { reactive, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { View, ChatDotSquare, Edit, Search, Close, Refresh, Printer, Van, CircleCheck } from '@element-plus/icons-vue';
import { api as Request, imageUrl, uploadUrl } from '@/utils/api';
import { common as Common } from '@/utils/common.js';
import { useTable } from '@/hooks/useTable.js';
import { useTabsForm } from '@/hooks/useTabsForm.js';
import { useDictData } from '@/hooks/network/useDictData.js';
import { useListData } from '@/hooks/network/useListData.js';
const disabledbtn = ref(false);/*  按钮可用与不可用 */
const formLoading = ref(false);/*  对话框中数据提交加载 */
let { total, pageSizes, multipleTableRef, tableLoading, tableState, searchCondition,
  handleCurrentChange, handleSizeChange, getTableInfo, searchInfo, resetSearch, batchDelete, deleteInfo, rowDblclick } =
  useTable({
    goods_name: '',
    order_no: '',
    user_name: '',
    mobile: '',
    delivery_type: '',
    express_no: '',
    status: '',
    is_print: '',
    start_create_time: '',
    end_create_time: '',
    start_pay_time: '',
    end_pay_time: '',
    start_delivery_time: '',
    end_delivery_time: '',

    current: 1,
    size: 10
  }, 'getMallOrderInfo', disabledbtn);

let { formRef, formData: mallGoodsForm, methodType, isDisabledbtn,
  activeName, setActiveName, handleChangeTabs, submitForm, handleClearData: cancelSubmit } = useTabsForm({
    id: '',
    delivery_type: '',
    reduce_price: ''
  }, disabledbtn, handleCustomOperation, formLoading);
let { getDictDataInfo } = useDictData();
let { getListDataInfo } = useListData();
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const expressDialogVisible = ref(false);
const printLoading = ref(false);

const state = reactive({
  selectStatusList: [],/* 状态数据 */
  selectWhetherList: [],/* 是否打印数据 */
  selectDeliveryTypeList: [],/* 配送方式数据 */
  queryDate: [],
  payTime: [],
  deliveryTime: [],
  goodsList: [],
  /* 物流公司 */
  logisticsList: [],
  /* 操作日志 */
  orderLogList: [],
  /* 打印信息 */
  orderInfoList: []
});

/* 详情数据 */
const redMallOrderInfo = reactive({
  order_no: '',
  status: '',
  statusName: '',
  express_id: '',
  express_name: '',
  express_no: '',
  user_name: '',
  mobile: '',

  address: '',
  create_time: '',
  pay_time: '',
  delivery_time: '',
  cancel_time: '',
  apply_refund_time: '',
  refund_time: '',
  reject_time: '',
  receipt_time: '',
  buyer_remark: '',
  seller_remark: '',
  goods_price: '',
  total_price: '',
  deliver_price: 0,
  red_packet_price: 0,
  gold_coin_price: 0,
  pay_price: 0
})
/* 业务员信息 */
const staff_info = reactive({
  staff_name: '',
  staff_mobile: ''
})
/* 发货订单号 */
const trackingNumberForm = reactive({
  id: '',
  express_id: '',
  express_no: ''
})
/* 商家备注 */
const sellerRemarkForm = reactive({
  id: '',
  seller_remark: ''
})
/* 打印快递单号 */
const expressPrintInfo = reactive({
  ids: [],
  express_id: '',
  is_merge_order: ''
})
/* 打印订单相关 */
const orderInfo = reactive({
  id: []
})
const id = ref(-1); /* 删除时所需的编号 删除时的id */
const newDate = ref(''); /* 打印时间 */
/* 打印对象 */
const printObj = reactive({
  id: 'printMe',
  popTitle: '打印订单',
  extraCss:
    'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead:
    '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>  #printMe { width: 100%;!important;  } <style>'
})

const formatImgList = computed(() => {
  return function (row) {
    if (row.goods_image === '') return [];
    let array = [imageUrl + row.goods_image];
    return array;
  };
});
/* 查询 创建时间更改事件 */
const changeQueryDate = (data) => {
  if (data !== null) {
    searchCondition.start_create_time = Common.renderTime(
      data[0]
    );
    searchCondition.end_create_time = Common.renderTime(data[1]);
  } else {
    searchCondition.start_create_time = '';
    searchCondition.end_create_time = '';
  }
}
/* 查询 支付时间更改事件 */
const changePayTime = (data) => {
  if (data !== null) {
    searchCondition.start_pay_time = Common.renderTime(data[0]);
    searchCondition.end_pay_time = Common.renderTime(data[1]);
  } else {
    searchCondition.start_pay_time = '';
    searchCondition.end_pay_time = '';
  }
}
/* 查询 发货时间更改事件 */
const changeDeliveryTime = (data) => {
  if (data !== null) {
    searchCondition.start_delivery_time = Common.renderTime(
      data[0]
    );
    searchCondition.end_delivery_time = Common.renderTime(
      data[1]
    );
  } else {
    searchCondition.start_delivery_time = '';
    searchCondition.end_delivery_time = '';
  }
}

/* 关闭切换标签页以后的自定义操作 */
function handleCustomOperation () {
  mallGoodsForm.id = '';
  mallGoodsForm.reduce_price = '';
  mallGoodsForm.delivery_type = '';

  staff_info.staff_name = '';
  staff_info.staff_mobile = '';

  redMallOrderInfo.order_no = '';
  redMallOrderInfo.status = '';
  redMallOrderInfo.statusName = '';

  redMallOrderInfo.express_id = '';
  redMallOrderInfo.express_name = '';
  redMallOrderInfo.express_no = '';
  redMallOrderInfo.deliveryName = '';
  redMallOrderInfo.user_name = '';
  redMallOrderInfo.mobile = '';
  redMallOrderInfo.address = '';

  redMallOrderInfo.create_time = '';
  redMallOrderInfo.pay_time = '';
  redMallOrderInfo.delivery_time = '';
  redMallOrderInfo.cancel_time = '';
  redMallOrderInfo.apply_refund_time = '';
  redMallOrderInfo.refund_time = '';
  redMallOrderInfo.reject_time = '';
  redMallOrderInfo.receipt_time = '';
  redMallOrderInfo.buyer_remark = '';
  redMallOrderInfo.seller_remark = '';
  redMallOrderInfo.goods_price = '';
  redMallOrderInfo.total_price = '';
  redMallOrderInfo.deliver_price = '';
  redMallOrderInfo.red_packet_price = '';
  redMallOrderInfo.gold_coin_price = '';
  redMallOrderInfo.pay_price = '';
  state.orderLogList = [];
  state.goodsList = [];

  orderInfo.id = [];

  expressPrintInfo.ids = [];
  expressPrintInfo.express_id = '';
  expressPrintInfo.is_merge_order = '';

  state.orderInfoList = [];
  newDate.value = '';

}

/* 获取订单详情数据 */
const getMallOrderByIdInfo = (id) => {
  formLoading.value = true;
  Request.getMallOrderByIdInfo({ id })
    .then((res) => {
      mallGoodsForm.id = res.result.id;
      mallGoodsForm.reduce_price = res.result.reduce_price;
      mallGoodsForm.delivery_type = res.result.delivery_type;

      redMallOrderInfo.order_no = res.result.order_no;
      redMallOrderInfo.status = res.result.status;
      redMallOrderInfo.statusName = res.result.statusName;

      redMallOrderInfo.express_id =
        res.result.express_id === 0 ? '' : res.result.express_id;

      redMallOrderInfo.express_name = res.result.express_name;
      redMallOrderInfo.express_no = res.result.express_no;
      redMallOrderInfo.deliveryName = res.result.deliveryName;
      if (res.result.staff_info) {
        staff_info.staff_name = res.result.staff_info.staff_name;
        staff_info.staff_mobile = res.result.staff_info.staff_mobile;
      }

      redMallOrderInfo.user_name = res.result.user_name;
      redMallOrderInfo.mobile = res.result.mobile;
      redMallOrderInfo.address = res.result.address;
      redMallOrderInfo.create_time = res.result.create_time;
      redMallOrderInfo.pay_time = res.result.pay_time;
      redMallOrderInfo.delivery_time = res.result.delivery_time;
      redMallOrderInfo.cancel_time = res.result.cancel_time;
      redMallOrderInfo.apply_refund_time =
        res.result.apply_refund_time;
      redMallOrderInfo.refund_time = res.result.refund_time;
      redMallOrderInfo.reject_time = res.result.reject_time;
      redMallOrderInfo.receipt_time = res.result.receipt_time;
      redMallOrderInfo.buyer_remark = res.result.buyer_remark;
      redMallOrderInfo.seller_remark = res.result.seller_remark;
      redMallOrderInfo.goods_price = res.result.goods_price;
      redMallOrderInfo.total_price = res.result.total_price;
      redMallOrderInfo.deliver_price = res.result.deliver_price;
      redMallOrderInfo.red_packet_price = res.result.red_packet_price;
      redMallOrderInfo.gold_coin_price = res.result.gold_coin_price;
      redMallOrderInfo.pay_price = res.result.pay_price;
      /* 操作日志 */
      state.orderLogList = res.result.logs;

      state.goodsList = res.result.goods;
    })
    .catch((res) => {
    }).finally(() => {
      formLoading.value = false;
    });
}
/* 点击编辑按钮 */
const handleViewEdit = (row, code) => {
  if ('view' === code) {
    isDisabledbtn.value = true;
  } else if ('edit' === code) {
    methodType.value = 'PUT';
  }
  setActiveName('two');
  orderInfo.id = [row.id];
  getMallOrderByIdInfo(row.id);
}
/* 重置方法回调函数 */
const customMethods = () => {
  state.queryDate = [];
  state.payTime = [];
  state.deliveryTime = [];
}
/* 统计数量，价格 */
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => isNaN(value))) {
      if (
        column.property === 'goods_price' ||
        column.property === 'sku_name' ||
        column.property === 'goods_name'
      ) {
        sums[index] = '';
        return;
      }
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          /* 解决小数点问题 */
          return (prev * 100 + curr * 100).toFixed(11) / 100;
        } else {
          return prev;
        }
      }, 0);
      sums[index] = sums[index] === 0 ? '' : sums[index];
      if (column.property === 'num') {
        sums[index] += ' 件';
        return;
      }
      if (column.property === 'total_price') {
        sums[index] += ' 元';
        return;
      }
    } else {
      sums[index] = '';
    }
  });
  return sums;
}
/* 批量处理 打印*/
const handleBatchPrint = () => {
  /* 获取选中的数据 */
  let selection = multipleTableRef.value.store.states.selection.value;
  let length = selection.length;
  if (length > 0) {
    /* 获取要批量修改数据的id值数组 (单个与批量删除相同) */
    orderInfo.id = [];
    for (let i = 0; i < length; i++) {
      orderInfo.id.push(selection[i].id);
      if (
        !['toBeDelivered', 'toBeReceived', 'completed'].includes(
          selection[i].status
        )
      ) {
        ElMessage.warning(
          '只有待发货,待收货,已完成的订单才能打印，请先取消选择其他订单，再打印'
        );
        return;
      }
    }
    handleToPrint();
  } else {
    ElMessage.warning('请至少选择一条数据');
  }
}
/* 打印快递单校验 */
const handleVerifyPrintExpress = () => {
  /* 获取选中的数据 */
  let selection = multipleTableRef.value.store.states.selection.value;
  let length = selection.length;
  if (length > 0) {
    /* 获取要批量修改数据的id值数组 (单个与批量删除相同) */
    expressPrintInfo.ids = [];
    for (let i = 0; i < length; i++) {
      expressPrintInfo.ids.push(selection[i].id);
      if (!['toBeDelivered'].includes(selection[i].status)) {
        ElMessage.warning(
          '只有待发货的订单才能打印快递单，请先取消选择其他订单，再打印快递单'
        );
        return false;
      }
    }
  } else {
    ElMessage.warning('请至少选择一条数据');
    return false;
  }
  return true;
}
/* 批量打印快递单 */
const handleBatchPrintExpressSingle = () => {
  if (!handleVerifyPrintExpress()) return;
  expressPrintInfo.express_id = '';
  expressPrintInfo.is_merge_order = 0;
  expressDialogVisible.value = true;
}
/* 合并打印快递单 */
const handleMergePrintExpressSingle = () => {
  if (!handleVerifyPrintExpress()) return;
  expressPrintInfo.express_id = '';
  expressPrintInfo.is_merge_order = 1;
  expressDialogVisible.value = true;
}
/* 打印快递单号 */
const getMallOrderPrintExpressInfo = () => {
  if (expressPrintInfo.express_id === '') {
    ElMessage.warning('请选择快递公司');
    return;
  }
  disabledbtn.value = true;
  Request.getMallOrderPrintExpressInfo(expressPrintInfo)
    .then((res) => {
      disabledbtn.value = false;
      expressDialogVisible.value = false;
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      expressPrintInfo.ids.forEach((id) => {
        handleChangeOrderStatus(id, 'toBeReceived');
      });
      /* 修改物流公司id,快递单号 */
      res.result.forEach((item) => {
        for (let i = 0; i < tableState.tableList.length; i++) {
          if (item.id === tableState.tableList[i].id) {
            tableState.tableList[i].express_id = expressPrintInfo.express_id;
            tableState.tableList[i].express_no = item.express_no;
          }
        }
      });
    })
    .catch((res) => {
      disabledbtn.value = false;
    });
}

/* 打印快递单 */
const handlePrintExpress = (row) => {
  expressPrintInfo.ids.push(row.id);
  expressPrintInfo.express_id = '';
  expressPrintInfo.is_merge_order = 0;
  expressDialogVisible.value = true;
}
/* 重新打印快递单 */
const handleReprintPrintExpress = (row) => {
  disabledbtn.value = true;
  Request.getMallOrderPrintOldExpressInfo({ id: row.id })
    .then((res) => {
      disabledbtn.value = false;
      expressDialogVisible.value = false;
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      if (row.status === 'toBeReceived') return;
      handleChangeOrderStatus(row.id, 'toBeReceived');
    })
    .catch((res) => {
      disabledbtn.value = false;
    });
}
/* 发货 */
const handleGoodsShip = (id, express_id, express_no) => {
  trackingNumberForm.id = id;
  trackingNumberForm.express_id = express_id === 0 ? '' : express_id;
  trackingNumberForm.express_no = express_no;
  dialogVisible.value = true;
}
/* 申请售后 */
const handleApplyRefund = (row) => {
  Request.putMallApplyRefundOrderInfo({ id: row.id })
    .then((res) => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(row.id, 'refunding');
    })
    .catch((res) => {
    });
}
/* 修改订单状态 */
const handleChangeOrderStatus = (id, status) => {
  for (let i = 0; i < tableState.tableList.length; i++) {
    if (tableState.tableList[i].id === id) {
      tableState.tableList[i].status = status;
      for (let j = 0; j < state.selectStatusList.length; j++) {
        if (state.selectStatusList[j].dictValue === status) {
          tableState.tableList[i].statusName = state.selectStatusList[j].dictLabel;
          break;
        }
      }
      break;
    }
  }
}
/* 确认收货 */
const handleReceiptOrder = (row) => {
  Request.putMallOrderConfirmInfo({ id: row.id })
    .then((res) => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(row.id, 'completed');
    })
    .catch((res) => { });
}
/* 取消订单 */
const handleCancelOrder = (row) => {
  Request.putMallOrderCancelInfo({ id: row.id })
    .then((res) => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(row.id, 'cancelled');
    })
    .catch((res) => { });
}
/* 同意退款 */
const handleAgreeToRefund = (row) => {
  Request.putMallOrderAgreeRefundInfo({ id: row.id })
    .then((res) => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(row.id, 'refunded');
    })
    .catch((res) => { });
}
/* 返回订单详情页面 */
const handleToOrderDetail = () => {
  if (mallGoodsForm.id !== '') {
    setActiveName('two');
    return;
  }
  handleViewEdit('', { id: orderInfo.id }, 'view', '查看');
}

/* 打印订单 */
const handlePrintOrder = ({ id }) => {
  setActiveName('three');
  orderInfo.id = [id];
  getMallOrderPrintInfo();
  newDate.value = Common.renderTime(new Date());
}
/* 获取打印订单信息 */
const getMallOrderPrintInfo = () => {
  printLoading.value = true;
  Request.getMallOrderPrintInfo({ ids: orderInfo.id })
    .then((res) => {
      printLoading.value = false;
      state.orderInfoList = res.result;
    })
    .catch((res) => {
      printLoading.value = true;
    });
}
/* 修改打印状态 */
const handlePrint = () => {
  if (orderInfo.id === '') {
    ElMessage.warning('请选择需要打印的订单');
    return;
  }
  printLoading.value = true;
  newDate.value = Common.renderTime(new Date());
  Request.putMallHasPrintInfo({ id: orderInfo.id })
    .then((res) => {
      printLoading.value = false;
      for (let i = 0; i < tableState.tableList.length; i++) {
        if (tableState.tableList[i].id === orderInfo.id) {
          tableState.tableList[i].is_print = 1;
          break;
        }
      }
    })
    .catch((res) => {
      printLoading.value = false;
    });
}
/* 更新物流单号信息 */
const putBannerOrderDeliveryInfo = () => {
  if (trackingNumberForm.express_id === '') {
    ElMessage.warning('请选择物流公司');
    return;
  }
  if (trackingNumberForm.express_no === '') {
    ElMessage.warning('请填写物流单号');
    return;
  }
  disabledbtn.value = true;
  formLoading.value = true;
  Request.putBannerOrderDeliveryInfo(trackingNumberForm)
    .then((res) => {
      dialogVisible.value = false;
      ElMessage.success(res.msg);
      for (let i = 0; i < tableState.tableList.length; i++) {
        if (tableState.tableList[i].id === trackingNumberForm.id) {
          tableState.tableList[i].express_id = trackingNumberForm.express_id;
          tableState.tableList[i].express_no = trackingNumberForm.express_no;
          /* 修改订单状态 */
          handleChangeOrderStatus(trackingNumberForm.id, 'toBeReceived');
          redMallOrderInfo.express_no = trackingNumberForm.express_no;
          break;
        }
      }
      /* 获取物流公司名称 */
      for (let i = 0; i < state.logisticsList.length; i++) {
        if (state.logisticsList[i].id === trackingNumberForm.express_id) {
          redMallOrderInfo.express_name = state.logisticsList[i].name;
          break;
        }
      }
    })
    .catch((res) => {
    }).finally(() => {
      disabledbtn.value = false;
      formLoading.value = false;
    });
}
/* 商家备注 */
const handleOrderRemark = (row) => {
  sellerRemarkForm.id = row.id;
  sellerRemarkForm.seller_remark = row.seller_remark;
  dialogVisible1.value = true;
}
/* 填写商家备注 */
const putMallOrderRemarkInfo = () => {
  if (sellerRemarkForm.seller_remark === '') {
    ElMessage.warning('请填写商家备注');
    return;
  }
  disabledbtn.value = true;
  formLoading.value = true;
  Request.putMallOrderRemarkInfo(sellerRemarkForm)
    .then((res) => {
      dialogVisible1.value = false;
      ElMessage.success(res.msg);

      for (let i = 0; i < tableState.tableList.length; i++) {
        if (tableState.tableList[i].id === sellerRemarkForm.id) {
          tableState.tableList[i].seller_remark =
            sellerRemarkForm.seller_remark;
          break;
        }
      }
    })
    .catch((res) => {
    }).finally(() => {
      disabledbtn.value = false;
      formLoading.value = false;
    });
}
/* 去打印 */
const handleToPrint = () => {
  setActiveName('three')
  getMallOrderPrintInfo();
  newDate.value = Common.renderTime(new Date());
}

/* 获取表格信息 */
getTableInfo();
/* 获取物流公司信息 */
getListDataInfo('getLogisticsInfo', state, 'logisticsList');

getDictDataInfo('ORDER_TYPE', state, 'selectStatusList');
getDictDataInfo('WHETHER', state, 'selectWhetherList');
getDictDataInfo('DELIVERY_TYPE', state, 'selectDeliveryTypeList');

</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.cyan {
  color: #67c23a;
}

.gray {
  color: #606266;
}

.orange {
  color: #e6a23c;
}

.mr10 {
  margin-right: 10px;
}

.textAlignCenter {
  text-align: center;
}

/* 修改select的盒模型 */
.el-select {
  display: block;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 修改该属性值  查询条件，查询结果得样式 */
.el-breadcrumb {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

/* 修改table每行的样式 */
:deep(.el-table .success-row) {
  background-color: #dff0d8;
}

/* 修改显示图片宽高 ,>>>用于修改组件中的css样式*/
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 148px;
  height: 148px;
}

/* 分割线字前的蓝色 start*/
.title-left-color {
  color: #666;
  font-size: 16px;
  font-weight: 550;
}

.title-left-color::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 15px;
  background: #00aeff;
  top: 3px;
  left: 10px;
}

/* end */

/* tag相关 */
// .ibDraggable {
//   // display: inline-block;
//   // margin: 0 0 10px 10px;
// }
.ibDraggable .el-tag {
  margin: 2px 5px;
}

/* 图片上传 start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

:deep(.el-upload--text) {
  width: inherit;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 图片上传 end */

.wzg-continer-video {
  position: relative;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

/* 视频删除按钮 start*/
.el-icon-close {
  position: absolute;
  top: 1px;
  right: -1px;
  z-index: 1000;
  display: inline-block;
  padding: 5px;
  cursor: pointer;
  background-color: #13ce66;
  color: #fff;
  border-radius: 2px;
  transition: 0.5s;
}

.el-icon-close:hover,
.wzg-video:hover {
  opacity: 0.8;
}

.wzg-video {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

/* 视频删除按钮 end*/

/* 描述列表组件 start */
:deep(.el-descriptions-item__container) {
  align-items: center;
}

:deep(.el-descriptions-item__content) {
  display: flex;
  align-items: center;
}

:deep(.el-descriptions-item__label) {
  flex: none;
}

/* 描述列表组件 end */

/* 打印订单 start */
.main {
  width: 900px;
  margin: 0 auto;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.printMe {
  padding: 10px 0 0 10px;
}

.w-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.remark {
  margin-top: 20px;
  font-size: 16px;
  color: #000;
}

.print-time {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: #000;

  .time {
    margin-right: 30px;
  }
}

table {
  // font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: #f0f2f5;
  border-collapse: collapse;
  color: #000;
  table-layout: auto;
  width: 100%;
  text-align: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;

  thead {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
    line-height: 40px;
    font-weight: bold;
    color: #000;
  }

  tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
    line-height: 18px;

    .text-align--right {
      text-align: right;
    }

    .w20 {
      width: 10px;
    }
  }

  td {
    // width: 25%;
    // padding: 5px 5px;
    font-size: 12px;
    text-align: left;
    word-break: break-all; // 元素换行

    .text-align--right {
      text-align: right;
    }

    .w20 {
      width: 10px;
    }
  }

  // 斑马纹效果stripe
  tr:nth-child(even) {
    background: #f5f7f9;
  }

  tr:nth-child(odd) {
    background: #fff;
  }
}

.table-empty {
  min-height: 60px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ebeef5;

  .table-empty-text {
    line-height: 60px;
    width: 50%;
    color: #909399;
  }
}

/* 描述列表组件 start */
:deep(.el-descriptions-item__label) {
  flex: none;
}

:deep(.el-descriptions__header) {
  margin-bottom: 8px;
}

:deep(.el-descriptions__body) {
  color: #000;
}

/* 描述列表组件 end */

/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

/* end */

.ml10 {
  margin-left: 10px;
}
</style>
